<template>
  <div class="app-container home">
    <!-- <el-table  :data="showdata" > -->
    <el-row :gutter="30">
      <el-col :xs="12" :sm="12" :md="12" :lg="12">
        <el-card shadow="hover" style="height: 402px">
          <div slot="header" class="clearfix">
            <span>基础数据</span>
          </div>
          <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
              <el-card shadow="hover">
                <div style="display: block">
                  <div style="display: flex; margin: 0px; height: 20px">
                    <i class="el-icon-user" style="margin-top: 10px"></i>
                    <p style="margin-left: 10px; margin-top: 5px">人员数量:</p>
                  </div>
                  <div style="display: block; height: 20px">
                    <p
                      v-for="(item, index) in showdata"
                      :key="index"
                      style="
                        padding-top: 5px;
                        padding-left: 3px;
                        font-style: italic;
                        text-align: center;
                      "
                    >
                      {{ item.peoplenum }}
                    </p>
                  </div>
                </div>
              </el-card>
            </el-col>

            <el-col :xs="12" :sm="12" :md="12" :lg="12">
              <el-card shadow="hover">
                <div style="display: block">
                  <div style="display: flex; margin: 0px; height: 20px">
                    <i
                      class="el-icon-c-scale-to-original"
                      style="margin-top: 10px"
                    ></i>
                    <p style="margin-left: 10px; margin-top: 5px">街道数量:</p>
                  </div>
                  <div style="display: block; height: 20px">
                    <p
                      v-for="(item, index) in showdata"
                      :key="index"
                      style="
                        padding-top: 5px;
                        padding-left: 3px;
                        font-style: italic;
                        text-align: center;
                      "
                    >
                      {{ item.streetnum }}
                    </p>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <el-row :gutter="20" style="margin-top: 10px">
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
              <el-card shadow="hover">
                <div style="display: block">
                  <div style="display: flex; margin: 0px; height: 20px">
                    <i
                      class="el-icon-office-building"
                      style="margin-top: 10px"
                    ></i>
                    <p style="margin-left: 10px; margin-top: 5px">小区数量:</p>
                  </div>
                  <div style="display: block; height: 20px">
                    <p
                      v-for="(item, index) in showdata"
                      :key="index"
                      style="
                        padding-top: 5px;
                        padding-left: 3px;
                        font-style: italic;
                        text-align: center;
                      "
                    >
                      {{ item.neighbornum }}
                    </p>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :xs="12" :sm="12" :md="12" :lg="12">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <el-row :gutter="20" style="display: flex">
              <el-col :xs="12" :sm="12" :md="12" :lg="12">
                <span>设备设施数量 </span>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="12">
                <p
                  v-for="(item, index) in showdata"
                  :key="index"
                  style="font-style: italic; text-align: center"
                >
                  总数量：{{ item.devicenum }}
                </p>
              </el-col>
            </el-row>
          </div>
          <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" style="height: 150px">
              <span
                style="
                  font-style: italic;
                  position: absolute;
                  left: 0;
                  top: 0;
                  border-left: 2px solid blue;
                  padding-left: 10px;
                "
                >缸闸井数量</span
              >

              <device1 :showdata="showdata" style="margin-top: 20%"></device1>
              <!-- <el-card shadow="hover">
                <div style="display: block">
                  <div style="display: flex; margin: 0px; height: 20px">
                    <i class="el-icon-s-tools" style="margin-top: 10px"></i>
                    <p style="margin-left: 10px; margin-top: 5px">
                      设备设施数量:
                    </p>
                  </div>
                  <div style="display: block; height: 20px">
                    <p
                      v-for="(item, index) in showdata"
                      :key="index"
                      style="
                        padding-top: 5px;
                        padding-left: 3px;
                        font-style: italic;
                        text-align: center;
                      "
                    >
                      {{ item.devicenum }}
                    </p>
                  </div>
                </div>
              </el-card> -->
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" style="height: 200px">
              <span
                style="
                  font-style: italic;
                  left: 0;
                  top: 0;
                  border-left: 2px solid blue;
                  padding-left: 10px;
                "
                >调压设施数量</span
              >
              <device2 :showdata="showdata"></device2>
            </el-col>
          </el-row>

          <el-row :gutter="24" style="margin-top: 10px">
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
              <span
                style="
                  font-style: italic;
                  left: 0;
                  top: 0;
                  border-left: 2px solid blue;
                  padding-left: 10px;
                "
                >管网</span
              >
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-top: 10px;
                  height: 50px;
                  background-color: #f7f9fd;
                "
              >
                <i
                  class="iconfont icon-guanwang"
                  style="margin-top: 4px; margin-right: 4px"
                ></i>
                <p
                  style="margin: 0; font-style: italic; text-align: center"
                  v-for="(item, index) in showdata"
                  :key="index"
                >
                  管网数量: {{ item.pipe_networknum }}
                </p>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-top: 31px;
                  height: 50px;
                  background-color: #f7f9fd;
                "
              >
                <i
                  class="iconfont icon-guandao"
                  style="margin-top: 4px; margin-right: 4px"
                ></i>
                <p
                  style="margin: 0; font-style: italic; text-align: center"
                  v-for="(item, index) in showdata"
                  :key="index"
                >
                  引入管数量: {{ item.introduction_tubenum }}
                </p>
              </div></el-col
            >
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 30px">
      <el-col :xs="12" :sm="12" :md="12" :lg="12">
        <el-card shadow="hover" style="height: 402px">
          <div slot="header" class="clearfix">
            <span>任务详细</span>
          </div>
          <el-row :gutter="20" style="margin-top: 10px">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" style="height: 200px">
              <taskProtect> </taskProtect>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12"> 
              <taskRepair></taskRepair>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 10px">

          </el-row>
        </el-card>
      </el-col>

      <el-col :xs="12" :sm="12" :md="12" :lg="12"> </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 10px">
      <el-col :xs="8" :sm="6" :md="6" :lg="6">
        <el-card shadow="hover">
          <div style="display: block">
            <div style="display: flex; margin: 0px; height: 20px">
              <i class="el-icon-document" style="margin-top: 10px"></i>
              <p style="margin-left: 10px; margin-top: 5px">任务数量:</p>
            </div>
            <div style="display: block; height: 20px">
              <p
                v-for="(item, index) in showdata"
                :key="index"
                style="
                  padding-top: 5px;
                  padding-left: 3px;
                  font-style: italic;
                  text-align: center;
                "
              >
                {{ item.tasknum }}
              </p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="8" :sm="6" :md="6" :lg="6">
        <el-card shadow="hover">
          <div style="display: block">
            <div style="display: flex; margin: 0px; height: 20px">
              <i class="el-icon-setting" style="margin-top: 10px"></i>
              <p style="margin-left: 10px; margin-top: 5px">调压设施数量:</p>
            </div>
            <div style="display: block; height: 20px">
              <p
                v-for="(item, index) in showdata"
                :key="index"
                style="
                  padding-top: 5px;
                  padding-left: 3px;
                  font-style: italic;
                  text-align: center;
                "
              >
                {{ item.presuredevnum }}
              </p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="8" :sm="6" :md="6" :lg="6">
        <el-card shadow="hover">
          <div style="display: block">
            <div style="display: flex; margin: 0px; height: 20px">
              <i class="el-icon-platform-eleme" style="margin-top: 10px"></i>
              <p style="margin-left: 10px; margin-top: 5px">站数量:</p>
            </div>
            <div style="display: block; height: 20px">
              <p
                v-for="(item, index) in showdata"
                :key="index"
                style="
                  padding-top: 5px;
                  padding-left: 3px;
                  font-style: italic;
                  text-align: center;
                "
              >
                {{ item.stationnum }}
              </p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="8" :sm="6" :md="6" :lg="6">
        <el-card shadow="hover">
          <div style="display: block">
            <div style="display: flex; margin: 0px; height: 20px">
              <i class="el-icon-takeaway-box" style="margin-top: 10px"></i>
              <p style="margin-left: 10px; margin-top: 5px">柜数量:</p>
            </div>
            <div style="display: block; height: 20px">
              <p
                v-for="(item, index) in showdata"
                :key="index"
                style="
                  padding-top: 5px;
                  padding-left: 3px;
                  font-style: italic;
                  text-align: center;
                "
              >
                {{ item.cabinetnum }}
              </p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 10px">
      <el-col :xs="8" :sm="6" :md="6" :lg="6">
        <el-card shadow="hover">
          <div style="display: block">
            <div style="display: flex; margin: 0px; height: 20px">
              <i class="el-icon-box" style="margin-top: 10px"></i>
              <p style="margin-left: 10px; margin-top: 5px">箱数量:</p>
            </div>
            <div style="display: block; height: 20px">
              <p
                v-for="(item, index) in showdata"
                :key="index"
                style="
                  padding-top: 5px;
                  padding-left: 3px;
                  font-style: italic;
                  text-align: center;
                "
              >
                {{ item.boxnum }}
              </p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="8" :sm="6" :md="6" :lg="6">
        <el-card shadow="hover">
          <div style="display: block">
            <div style="display: flex; margin: 0px; height: 20px">
              <i class="el-icon-set-up" style="margin-top: 10px"></i>
              <p style="margin-left: 10px; margin-top: 5px">地调数量:</p>
            </div>
            <div style="display: block; height: 20px">
              <p
                v-for="(item, index) in showdata"
                :key="index"
                style="
                  padding-top: 5px;
                  padding-left: 3px;
                  font-style: italic;
                  text-align: center;
                "
              >
                {{ item.geotonenum }}
              </p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="8" :sm="6" :md="6" :lg="6">
        <el-card shadow="hover">
          <div style="display: block">
            <div style="display: flex; margin: 0px; height: 20px">
              <i class="iconfont icon-liutijixie" style="margin-top: 10px"></i>
              <p style="margin-left: 10px; margin-top: 5px">缸闸井数量:</p>
            </div>
            <div style="display: block; height: 20px">
              <p
                v-for="(item, index) in showdata"
                :key="index"
                style="
                  padding-top: 5px;
                  padding-left: 3px;
                  font-style: italic;
                  text-align: center;
                "
              >
                {{ item.cyb_locknum }}
              </p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="8" :sm="6" :md="6" :lg="6">
        <el-card shadow="hover">
          <div style="display: block">
            <div style="display: flex; margin: 0px; height: 20px">
              <i class="el-icon-receiving" style="margin-top: 10px"></i>
              <p style="margin-left: 10px; margin-top: 5px">缸数量:</p>
            </div>
            <div style="display: block; height: 20px">
              <p
                v-for="(item, index) in showdata"
                :key="index"
                style="
                  padding-top: 5px;
                  padding-left: 3px;
                  font-style: italic;
                  text-align: center;
                "
              >
                {{ item.cylindernum }}
              </p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 10px">
      <el-col :xs="8" :sm="6" :md="6" :lg="6">
        <el-card shadow="hover">
          <div style="display: block">
            <div style="display: flex; margin: 0px; height: 20px">
              <i
                class="iconfont icon-ranqizhajingjiance"
                style="margin-top: 10px"
              ></i>
              <p style="margin-left: 10px; margin-top: 5px">闸井数量:</p>
            </div>
            <div style="display: block; height: 20px">
              <p
                v-for="(item, index) in showdata"
                :key="index"
                style="
                  padding-top: 5px;
                  padding-left: 3px;
                  font-style: italic;
                  text-align: center;
                "
              >
                {{ item.lock_wellnum }}
              </p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="8" :sm="6" :md="6" :lg="6">
        <el-card shadow="hover">
          <div style="display: block">
            <div style="display: flex; margin: 0px; height: 20px">
              <i class="iconfont icon-guanwang" style="margin-top: 10px"></i>
              <p style="margin-left: 10px; margin-top: 5px">管网数量:</p>
            </div>
            <div style="display: block; height: 20px">
              <p
                v-for="(item, index) in showdata"
                :key="index"
                style="
                  padding-top: 5px;
                  padding-left: 3px;
                  font-style: italic;
                  text-align: center;
                "
              >
                {{ item.pipe_networknum }}
              </p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="8" :sm="6" :md="6" :lg="6">
        <el-card shadow="hover">
          <div style="display: block">
            <div style="display: flex; margin: 0px; height: 20px">
              <i class="iconfont icon-guandao" style="margin-top: 10px"></i>
              <p style="margin-left: 10px; margin-top: 5px">引入管数量:</p>
            </div>
            <div style="display: block; height: 20px">
              <p
                v-for="(item, index) in showdata"
                :key="index"
                style="
                  padding-top: 5px;
                  padding-left: 3px;
                  font-style: italic;
                  text-align: center;
                "
              >
                {{ item.introduction_tubenum }}
              </p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="8" :sm="6" :md="6" :lg="6">
        <el-card shadow="hover">
          <div style="display: block">
            <div style="display: flex; margin: 0px; height: 20px">
              <i class="iconfont icon-weibao" style="margin-top: 10px"></i>
              <p style="margin-left: 10px; margin-top: 5px">维保任务数量:</p>
            </div>
            <div style="display: block; height: 20px">
              <p
                v-for="(item, index) in showdata"
                :key="index"
                style="
                  padding-top: 5px;
                  padding-left: 3px;
                  font-style: italic;
                  text-align: center;
                "
              >
                {{ item.maintenancenum }}
              </p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 10px">
      <el-col :xs="8" :sm="6" :md="6" :lg="6">
        <el-card shadow="hover">
          <div style="display: block">
            <div style="display: flex; margin: 0px; height: 20px">
              <i class="iconfont icon-weixiufuwu" style="margin-top: 10px"></i>
              <p style="margin-left: 10px; margin-top: 5px">维修任务数量:</p>
            </div>
            <div style="display: block; height: 20px">
              <p
                v-for="(item, index) in showdata"
                :key="index"
                style="
                  padding-top: 5px;
                  padding-left: 3px;
                  font-style: italic;
                  text-align: center;
                "
              >
                {{ item.repairnum }}
              </p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" style="padding-left: 20px">
        <el-card>
          <!-- <h2>数据统计</h2> -->
          <div class="num" ref="num" id="chart3">NumData</div>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />
  </div>
</template>

<script>
// vue文件的引入
// import NumData from "./tool/other/numdata";
// js方法的引入
import { Numlist } from "../api/charts/NumData.js";
import "../assets/icons/iconfont.css";
import device1 from "./echarts/device1";
import device2 from "./echarts/device_pressure";
import taskProtect from "./echarts/task_protect";
import taskRepair from "./echarts/task_repair";
export default {
  name: "Index",
  components: {
    //  NumData,
    device1,
    device2,
    taskProtect,
    taskRepair,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 版本号
      version: "3.8.7",
      showdata: [
        // {
        //   peoplenum: '12331',
        //   streetnum: '5',
        //   neighbornum: '4',
        //   devicenum: '12',
        //   tasknum: '32',
        //   presuredevnum: '42',
        //   stationnum: '12',
        //   cabinetnum: '23',
        //   boxnum: '43',
        //   geotonenum: '22',
        //   cyb_locknum: '13',
        //   cylindernum: '32',
        //   lock_wellnum: '54',
        //   pipe_networknum: '23',
        //   introduction_tubenum: '43',
        //   maintenancenum: '43',
        //   repairnum: '54',
        // },
      ],
      chartId: "chart3",
      option: {
        // title: {
        //   text: '数据统计'
        // },
        // tooltip: {},
        // legend: {
        //   data: ['数量']
        // },
        // dataset: {
        //   dimensions: ['numtype', 'num'],
        //   source: [
        //   ]
        // },
        // xAxis: {
        //   type: 'category'
        // },
        // yAxis: {},
        // series: [
        //   {
        //     name: '数量',
        //     type: 'bar',
        //   }
        // ]
      },
    };
  },
  mounted() {
    this.getData();

    window.addEventListener("resize", this.handleResize);
  },
  // 监听数据变化时重新获取数据
  watch: {
    // 监听需要更新图表的数据
    someData: function (newVal) {
      this.updateChart({
        id: this.chartId,
        option: this.getUpdatedOption(newVal),
      });
    },
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },

    getData() {
      Numlist()
        .then((res) => {
          // console.log("Data:", res.rows);
          this.showdata = res.rows;
          // console.log("data:", this.showdata);
          this.getEcharts();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 判断属性是否有值
    getColumn(key) {
      if (this.showdata.key != null) {
        return this.showdata.key;
      } else {
        return false;
      }
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },

    getEcharts() {
      const myChart = this.$echarts.init(this.$refs.num);
      // 指定图表的配置项和数据
      const categories = Object.keys(this.showdata[0]);
      // console.log('cate', categories);
      const seriesData = categories.map((key) =>
        parseInt(this.showdata[0][key], 10)
      );
      // console.log('seriesData', seriesData);
      this.option = {
        title: {
          text: "数据统计",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
        },
        legend: {
          data: ["数量"],
        },
        // dataset: {
        //   dimensions: ['numtype', 'num'],
        //   source: [
        //     { numtype: '男', num: 5 },
        //     numtype: this.showdata.map(item => item.numtype)

        //   ]

        //   // [
        //   //   this.showdata.map
        //   //   (item => {item.numtype,item.num})
        //   //   // { numtype: 'peoplenum', num: 3132 }
        //   // ]
        // },
        xAxis: {
          axisTick: {
            alignWithLabel: true,
          },
          type: "category",
          data: categories,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数量",
            type: "bar",
            data: seriesData,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      // console.log('this.option', this.option);
      myChart.setOption(this.option);
    },
  },
};
</script>

<style scoped lang="scss">
.top {
  display: flex;
}

.top div {
  display: block;
  // padding: 10px 10px;
  margin: 5px 20px;
  height: 100px;
  width: 200px;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}

.num {
  height: 300px;
  width: 100%;
}
</style>
